<template>
  <div>

    <div class="ud-app-loader ud-component--header-v6--header udlite-header" data-module-id="common/udlite/desktop"
         data-module-args="{&quot;isInstructorSignupEnabled&quot;:false,&quot;isLoggedIn&quot;:false,&quot;tryUFBPlacements&quot;:{&quot;bar&quot;:&quot;ufb_header&quot;,&quot;profile&quot;:&quot;account-menu&quot;,&quot;mobile&quot;:&quot;ufb_header&quot;},&quot;mobileAppLink&quot;:{&quot;url&quot;:&quot;/mobile/&quot;},&quot;searchPhrase&quot;:null}"
         data-module-priority="-10">
      <div data-unique-id="339" style="display:none"></div>

      <div class="udlite-text-sm header--header--3sK1h header--flex-middle--2Xqjv" data-purpose="header">
        <div class="skip-to-content-button--skip-to-content--1MoIi">
          <button type="button"
                  class="udlite-btn udlite-btn-large udlite-btn-primary udlite-heading-md skip-to-content-button--skip-to-content-btn--3Uakj">
            <span aria-hidden="true" class="skip-to-content-button--skip-to-content-shadow--eBW6V"></span><span
            style="margin:0">跳转至目录</span></button>
        </div>
        <a href="/" class="header--flex-middle--2Xqjv header--logo--bdAod"><img
          src="../assets/static/picture/logo-coral.svg" alt="Udemy" width="110" height="32"/></a>
        <nav class="header--gap-button--3bIww popper--popper--19faV popper--popper-hover--4YJ5J">
          <span class="udlite-text-sm header--dropdown-button-text--2jtIM">类别</span>
        </nav>


        <div class="udlite-search-form-autocomplete header--search-bar--1_mS0 udlite-form-group"><label
          class="udlite-sr-only udlite-form-label udlite-heading-sm"
          for="u339-search-form-autocomplete--3">搜索任何内容</label>

          <input placeholder="搜索任何内容" name="q" autoComplete="off" value="" id="u339-search-form-autocomplete--3"
                 class="udlite-text-input udlite-text-input-small udlite-text-sm udlite-search-form-autocomplete-input js-header-search-field"/>
        </div>

        <van-image round width="5rem" height="5rem" :src="img_src"/>

        <div v-if="username != ''">
          欢迎:{{ username }} <a href="JavaScript:void(0)" @click="logout">注销</a>
        </div>

        <div v-else>
          <router-link to="/login">登录</router-link>
          /
          <router-link to="/reg">注册</router-link>
        </div>

        <div style="flex:1"></div>
      </div>

    </div>


  </div>
</template>

<script type="text/javascript">

import {config, formatXml} from '../config.js';

export default {
  data() {
    return {
      username: ""

    }
  },
  //接收父组件传递过来的变量
  props: ['img_src'],
  //初始化
  mounted: function () {
    if (localStorage.getItem('username') === null) {
      this.username = ''
    } else {
      this.username = localStorage.getItem('username')
    }
  },
  //自定义方法
  methods: {
    logout: function () {
      //注销就是删除状态
      localStorage.removeItem('username')
      localStorage.removeItem('userid')
      localStorage.removeItem('token')
      //用户可能登录 应道跳转
      this.$router.push('/userinfo')
    }
  }
};

</script>

<style type="text/css">

.child {

  width: 40px;
  height: 40px;
  background: #f2f3f5;
  border-radius: 4px;
}

</style>